<template>
  <div style="height:100vh;background: #e8e8e8;">
    <div class="title">档案查询</div>
    <van-form
      id="detail"
      @submit="onSubmit"
      style="background: rgb(232, 232, 232);"
    >
      <van-field
        v-model="form.code"
        name="产品编码"
        label="产品编码"
        placeholder="产品编码"
        :rules="[{ required: true, message: '请填写产品编码' }]"
      />
      <van-field
        v-model="form.name"
        name="辅料名称"
        label="辅料名称"
        placeholder="辅料名称"
        :rules="[{ required: true, message: '请填写辅料名称' }]"
      />
      <van-field
        readonly
        clickable
        name="picker"
        :value="form.classifyBigValue"
        label="辅料大类"
        @blur="onBlur"
        placeholder="辅料大类"
        @click="getDictChildList('showClassifyBig','CLASSIFY_BIG', 'classifyBigList')"
      />

      <van-popup
        v-model="showClassifyBig"
        position="bottom"
      >
        <van-picker
          show-toolbar
          :columns="classifyBigList"
          value-key="name"
          @confirm="e=>onConfirmTable(e,'showClassifyBig','classifyBig','classifyBigValue')"
          @cancel="showClassifyBig = false"
        />
      </van-popup>
      <van-field
        readonly
        clickable
        name="picker"
        :value="form.classifySmallValue"
        label="辅料小类"
        @blur="onBlur"
        placeholder="辅料小类"
        @click="showClassifySmall = true"
      />

      <van-popup
        v-model="showClassifySmall"
        position="bottom"
      >
        <van-picker
          show-toolbar
          :columns="classifySmallList"
          value-key="name"
          @confirm="e=>onConfirmTable(e,'showClassifySmall','classifySmall','classifySmallValue')"
          @cancel="showClassifySmall = false"
        />
      </van-popup>
      <van-field
        readonly
        clickable
        name="picker"
        :value="form.classifyMinimumValue"
        label="辅料小小类"
        @blur="onBlur"
        placeholder="辅料小小类"
        @click="getDictChildList('showClassifyMinimum','CLASSIFY_MINIMUM', 'classifyMinimumList')"
      />

      <van-popup
        v-model="showClassifyMinimum"
        position="bottom"
      >
        <van-picker
          show-toolbar
          :columns="classifyMinimumList"
          value-key="name"
          @confirm="e=>onConfirmTable(e,'showClassifyMinimum','classifyMinimum','classifyMinimumValue')"
          @cancel="showClassifyMinimum = false"
        />
      </van-popup>
      <van-field
        readonly
        clickable
        name="picker"
        :value="form.priceProgrammeValue"
        label="价格方案"
        @blur="onBlur"
        placeholder="价格方案"
        @click="getDictChildList('showPriceProgramme','PRICE_PROGRAMME', 'priceProgrammeList')"
      />

      <van-popup
        v-model="showPriceProgramme"
        position="bottom"
      >
        <van-picker
          show-toolbar
          :columns="priceProgrammeList"
          value-key="name"
         @confirm="e=>onConfirmTable(e,'showPriceProgramme','priceProgramme','priceProgrammeValue')"
          @cancel="showPriceProgramme = false"
        />
      </van-popup>
      <van-field
        readonly
        clickable
        name="picker"
        :value="form.supplyTypeValue"
        label="供应类型"
        @blur="onBlur"
        placeholder="供应类型"
        @click="getDictChildList('showSupplyType','SUPPLY_TYPE', 'supplyTypeList')"
      />

      <van-popup
        v-model="showSupplyType"
        position="bottom"
      >
        <van-picker
          show-toolbar
          :columns="supplyTypeList"
          value-key="name"
          @confirm="e=>onConfirmTable(e,'showSupplyType','supplyType','supplyTypeValue')"
          @cancel="showSupplyType = false"
        />
      </van-popup>
      <van-field
        readonly
        clickable
        name="picker"
        :value="form.purchasingUnitValue"
        label="采购单位"
        @blur="onBlur"
        placeholder="采购单位"
         @click="getDictChildList('showPurchasingUnit','PURCHASING_UNIT', 'purchansingUnitList')"
      />

      <van-popup
        v-model="showPurchasingUnit"
        position="bottom"
      >
        <van-picker
          show-toolbar
          :columns="purchansingUnitList"
          value-key="name"
          @confirm="e=>onConfirmTable(e,'showPurchasingUnit','purchasingUnit','purchasingUnitValue')"
          @cancel="showPurchasingUnit = false"
        />
      </van-popup>
      <van-field
        v-model="form.wasteRate"
        name="损耗率"
        label="损耗率"
        placeholder="损耗率"
        :rules="[{ required: true, message: '请填写损耗率' }]"
      />
      <van-field
        readonly
        clickable
        name="picker"
        :value="form.productYearValue"
        label="产品年份"
        @blur="onBlur"
        placeholder="产品年份"
        @click="getDictChildList('showProductYear','PRODUCT_YEAR', 'productYearList')"
      />

      <van-popup
        v-model="showProductYear"
        position="bottom"
      >
        <van-picker
          show-toolbar
          :columns="productYearList"
          value-key="name"
          @confirm="e=>onConfirmTable(e,'showProductYear','productYear','productYearValue')"
          @cancel="showProductYear = false"
        />
      </van-popup>
      <van-field
        readonly
        clickable
        name="picker"
        :value="form.putGoodsSeasonValue"
        label="对应上货季"
        @blur="onBlur"
        placeholder="对应上货季"
        @click="getDictChildList('showPutGoodsSeason','PUT_GOODS_SEASON', 'putGoodsSeasonList')"
      />

      <van-popup
        v-model="showPutGoodsSeason"
        position="bottom"
      >
        <van-picker
          show-toolbar
          :columns="putGoodsSeasonList"
          value-key="name"
          @confirm="e=>onConfirmTable(e,'showPutGoodsSeason','putGoodsSeason','putGoodsSeasonValue')"
          @cancel="showPutGoodsSeason = false"
        />
      </van-popup>
      <van-field
        v-model="form.textureComponent"
        name="产品材质/成分"
        label="产品材质/成分"
        placeholder="产品材质/成分"
        :rules="[{ required: true, message: '请填写产品材质/成分' }]"
      />
      <van-field
        v-model="form.gramWeight"
        name="克重"
        label="克重"
        placeholder="克重"
        :rules="[{ required: true, message: '请填写克重' }]"
      />
      <van-field
        v-model="form.minification"
        name="缩率"
        label="缩率"
        placeholder="缩率"
        :rules="[{ required: true, message: '请填写缩率' }]"
      />
      <van-field
        v-model="form.widthSegmentLength"
        name="门幅/段长"
        label="门幅/段长"
        placeholder="门幅/段长"
        :rules="[{ required: true, message: '请填写门幅/段长' }]"
      />
      <van-field
        v-model="form.bigGoodsCycle"
        name="大货周期"
        label="大货周期"
        placeholder="大货周期"
        :rules="[{ required: true, message: '请填写大货周期' }]"
      />
      <van-field
        v-model="form.quickBackCycle"
        name="快反周期"
        label="快反周期"
        placeholder="快反周期"
        :rules="[{ required: true, message: '请填写快反周期' }]"
      />
      <van-field
        v-model="form.stickLiningTemperature"
        name="粘衬温度"
        label="粘衬温度"
        placeholder="粘衬温度"
        :rules="[{ required: true, message: '请填写粘衬温度' }]"
      />
      <van-field
        v-model="form.stickLiningTime"
        name="粘衬时间"
        label="粘衬时间"
        placeholder="粘衬时间"
        :rules="[{ required: true, message: '请填写粘衬时间' }]"
      />
      <van-field
        v-model="form.stickLiningPressure"
        name="粘衬压力"
        label="粘衬压力"
        placeholder="粘衬压力"
        :rules="[{ required: true, message: '请填写粘衬压力' }]"
      />
      <van-field
        v-model="form.placeOfOrigin"
        name="产地"
        label="产地"
        placeholder="产地"
        :rules="[{ required: true, message: '请填写产地' }]"
      />
       <van-field
        readonly
        clickable
        name="picker"
        :value="form.supplyValue"
        label="默认供应商"
        @blur="onBlur"
        placeholder="默认供应商"
        @click="getSupplyList"
      />

      <van-popup
        v-model="showSupply"
        position="bottom"
      >
        <van-picker
          show-toolbar
          :columns="supplyList"
          value-key="name"
          @confirm="e=>onConfirmTable(e,'showSupply','supply','supplyValue')"
          @cancel="showSupply = false"
        />
      </van-popup>
      <van-field
        v-model="form.specialExplain"
        name="产品特性说明"
        label="产品特性说明"
        placeholder="产品特性说明"
        :rules="[{ required: true, message: '请填写产品特性说明' }]"
      />
      <van-field
        v-model="userName"
        name="旧物料编号"
        label="旧物料编号"
        placeholder="旧物料编号"
        :rules="[{ required: true, message: '请填写旧物料编号' }]"
      />
      <div style="margin: 16px;">
        <van-button
          round
          block
          type="info"
          native-type="submit"
        >提交</van-button>
      </div>
    </van-form>
  </div>

</template>
<script>
import { Notify } from 'vant'
import { postAction } from '@/api/manage'

export default {
  components: {
  },
  data() {
    return {
      userName:'',
      bigId:'',
      show:false,
      supplyList:[],
      showSupply:false,
      classifyBigList: [],
      showClassifyBig: false,
      classifySmallList: [],
      showClassifySmall: false,
      classifyMinimumList: [],
      showClassifyMinimum:false,
      priceProgrammeList: [],
      showPriceProgramme:false,
      supplyTypeList: [],
      showSupplyType:false,
      purchansingUnitList: [],
      showPurchasingUnit:false,
      productYearList: [],
      showProductYear:false,
      putGoodsSeasonList: [],
      showPutGoodsSeason:false,
      form: {
        accColorList: [],
        accSpecsList: [],
        accSupplyList: [],
        bigGoodsCycle: '',
        classifyBig: undefined,
        classifyBigValue: '',
        classifyMinimum: undefined,
        classifyMinimumValue: '',
        classifySmall: undefined,
        classifySmallValue: '',
        code: '',
        gramWeight: '',
        imageList: [],
        jobNumber: '',
        minification: '',
        name: '',
        placeOfOrigin: '',
        priceProgramme: undefined,
        priceProgrammeValue: '',
        productYear: undefined,
        productYearValue: '',
        purchasingUnit: undefined,
        purchasingUnitValue: '',
        putGoodsSeason: undefined,
        putGoodsSeasonValue: '',
        quickBackCycle: '',
        specialExplain: '',
        stickLiningPressure: '',
        stickLiningTemperature: '',
        stickLiningTime: '',
        supplyType: undefined,
        supplyTypeValue: '',
        textureComponent: '',
        wasteRate: '',
        widthSegmentLength: '',
        copyFlag: 0,
        supply:'',
        supplyValue:''
      },
    }
  },
  computed: {
    linkId() {
      return localStorage.getItem('linkId')
    }
  },
  created: function () {
    document.title = '档案查询'
    if (this.id) {
      this.getDetail()
    }
  },
  mounted() {},
  methods: {
    
    getSupplyList(){
      this.showSupply = true
      const params = {
        keyWord: ""
      }
      try {
          postAction(`/basemgt-material/material/supply/search`, params).then(res => {
            if (res.code == 200) {
              this.supplyList = res.data
            } else {
              if (res.msg) {
                this.$message.error(res.msg)
              } else {
                this.$message.error('获取供应商列表失败！')
              }
            }
          })
        } catch (error) {
          this.$message.error('获取数据字典失败！')
        }
    },
    async getDictChildList(vis, name, list, id) {
      this[vis] = true
      if (!this[list].length || (this[list].length && id)) {
        const params = {
          name: name,
          parentId: id
        }
        try {
          postAction(`/basemgt-rd/dict/getDetails`, params).then(res => {
            if (res.code == 200) {
              this[list] = res.data
            } else {
              if (res.msg) {
                this.$message.error(res.msg)
              } else {
                this.$message.error('获取数据字典失败！')
              }
            }
          })
        } catch (error) {
          this.$message.error('获取数据字典失败！')
        }
      }
    },
    onConfirmTable(value, vis, code, name) {
      if(code == 'classifyBig'){
        this.form.classifySmall = ''
        this.form.classifySmallValue = ''
        this.getDictChildList('show','CLASSIFY_SMALL', 'classifySmallList',value.id)
      }
      this.form[name] = value.name
      this.form[code] = value.code
      this[vis] = false
    },
    onBlur() {
      window.scroll(0, 0)
    },


    onSubmit(values) {
      console.log(values);
     console.log(this.form);
    },
    getDetail() {
      const params = {
        id: this.id
      }
      try {
        this.$http({
          url: '/api/gateway/basemgt-feedback/feedback/getFeedbackReplyDetail',
          method: 'get',
          params: params
        }).then(res => {
          if (res.code == 200) {
            this.type = '线上非授权销售投诉'
            this.list = res.data
            this.userName = res.data.userName
            this.mobile = res.data.mobile
            this.indexPic = res.data.indexPic
            this.minPriceInfo = res.data.minPriceInfo
            this.isAnonymous = res.data.isAnonymous == 0 ? false : true
            this.brandName = res.data.brandName
            this.content = res.data.content
            this.fileList = res.data.indexPic
            this.fileList2 = res.data.productInfoList
            this.feedbackSystem = res.data.feedbackSystem
            this.informerCode = res.data.informerCode
          } else {
            Notify({ type: 'warning', message: data.msg })
          }
        })
      } catch (error) {
      } finally {
        this.loading = false
      }
    }
  }
}
</script>
<style scoped>
.title {
  text-align: center;
  padding: 10px;
  font-size: 18px;
  font-weight: 500;
}
.upload::after {
  content: '*填写说明：ID需露出';
  color: red;
  font-size: 12px;
}
.info::after {
  content: '*填写说明：售卖品牌、货季、折扣等';
  color: red;
  font-size: 12px;
  -webkit-transform: scaleY(1);
  transform: scaleY(1);
}
</style>
<style>
#detail .van-field--disabled .van-field__label {
  color: #646566;
}
</style>